@use "sass:math";
@import "code-style";
@import "assets/style/var";

@mixin with-theme-dark() {
  @at-root body[code-theme=dark] {
    @content;
  }
}

$common-box-shadow: 0 0 8px rgb(0 0 0 / 5%);

.--markdown {
  $line-height: f-size(1.8);

  width: 100%;
  display: block;
  word-break: break-word;
  line-height: $line-height;
  font-family: $font-source-han-sans;
  font-size: f-size(0.92);
  font-weight: 400;
  color: #444;

  @include dark-mode {
    color: #e7e7e7;
  }

  @each $size in 1,
    2,
    3,
    4,
    5,
    6 {
    h#{$size} {
      cursor: pointer;
      display: block;
      position: relative;
      margin: math.div(8rem - $size, 6) 0;

      sup {
        position: absolute;
        top: -$header-height;
      }

      a.header-link {
        background: none;
        text-decoration: none;
        position: relative;
        color: $theme-color-darken;

        @include dark-mode {
          color: $theme-color-lighten;
        }

        font-size: math.div(8rem - $size, 16rem) + 1rem;
        display: flex;

        &::before {
          content: "#";
          position: absolute;
          font-size: math.div(8rem - $size, 10rem) + 0.5rem;
          left: -5px;
          transform: translateX(-100%);

          @include mobile {
            content: none !important;
          }
        }
      }

      &:hover {
        text-decoration: underline;
        text-decoration-color: $theme-color-darken;

        @include dark-mode {
          text-decoration-color: $theme-color-lighten;
        }
      }
    }
  }

  hr {
    width: 100%;
    height: 1px;
    background: gray;

    @include dark-mode {
      background: rgb(199 199 199);
    }

    margin: 2rem 0;
    border: none;
  }

  p {
    white-space: pre-line;
  }

  a[href]:not(.header-link) {
    margin: 0 0.25rem;
    position: relative;
    text-decoration: underline;
    transition: $common-transition;
    color: $theme-color-darken;

    @include dark-mode {
      color: $theme-color-lighten;
    }

    left: 0;
    word-break: keep-all;
    align-items: center;
    line-height: 1rem;

    &:active {
      color: $theme-color;

      &::after {
        background: $theme-color;
      }
    }

    >.open-link {
      > svg {
        width: 12px;
        height: 12px;
        fill: #646464;

        @include dark-mode {
          fill: #c7c7c7;
        }
      }
    }
  }

  img[alt="sticker"] {
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    margin: 0 0.2rem -0.2rem;
    object-fit: contain;
  }

  span.image-container {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem 5%;
    width: 90%;

    .--lazy-img {
      max-width: 100%;
      box-shadow: $common-box-shadow;

      &.loading,
      &.err {
        width: 150px;
        height: 150px;
      }
    }

    svg {
      width: 60px;
      height: 60px;
    }

    &.just-height {
      img {
        width: unset;
      }
    }

    img {
      width: 100%;
      object-fit: contain;
      box-shadow: $common-box-shadow;
    }
  }

  span.image-container,
  div.embed-media {
    >small {
      color: gray;

      @include dark-mode {
        color: rgb(214 214 214);
      }

      font-size: f-size(0.8);
      line-height: f-size(0.8);
      margin-top: 16px;
      order: 1;
    }
  }

  strong,
  em {
    margin: 0 0.15rem;
  }

  del {
    text-decoration-color: red;
  }

  blockquote {
    line-height: 1.8rem;
    position: relative;
    border-left: 3px solid #aa40ff;
    padding: 0.5rem 0.8rem;
    margin: 1rem 0;
    background: rgb(239 239 239);
    border-radius: 0 0.5rem 0.5rem 0;

    @include dark-mode {
      border-left-color: #a800a8;
      background: #1b1b1b;
    }
  }

  table {
    width: 100%;
    margin: 1rem auto;
    border: 1px solid #dbdbdb;
    border-spacing: 0;
    border-collapse: collapse;

    @include dark-mode {
      border: 1px solid #646464;
    }

    thead {
      background: rgba($theme-color-lighten, 0.1);

      @include dark-mode {
        background: #2a2f36;
        color: white;
      }

      font-weight: 600;

      th {
        padding: 8px 0;
      }
    }

    tbody {
      background: white;

      @include dark-mode {
        background: #1b1b1b;
      }

      tr {
        padding: 10px 0;

        &:nth-child(2n) {
          background: #f7f7f7;

          @include dark-mode {
            background: inherit;
          }
        }
      }
    }
  }

  ul,
  ol {
    padding: 0 0 0 1.8rem;

    >li {
      position: relative;
      margin: 0.35rem 0;
    }
  }

  code {
    font-family: $font-code;
    font-weight: 600;
    letter-spacing: 0;

    &:not(.hljs) {
      border-radius: 3px;
      border: 1px solid rgb(0 0 0 / 20%);
      font-size: f-size(0.75);
      font-weight: 400;
      margin: 0 0.25rem;
      padding: 0.22rem 0.48em;

      @include dark-mode {
        border-color: #616161;
      }
    }
  }

  @include with-theme-dark {
    pre {
      background: #383d49;

      >code.hljs {
        border-color: #444;
      }

      >span {
        >span {
          background: #383d49;

          &:hover {
            background: #6b758c;

            svg {
              fill: #fff;
            }
          }

          svg {
            fill: #efefef;
          }
        }
      }

      >small {
        color: #939393;
      }
    }
  }

  pre {
    margin: 1.3rem 0;
    border-radius: 8px;
    border: 1px solid #e3e3e3;

    @include dark-mode {
      border-color: rgb(56 56 56);
    }

    box-shadow: $common-box-shadow;
    position: relative;
    background: #f3f3f3;

    >span {
      position: absolute;
      right: 6px;
      top: 6px;
      display: flex;

      >span {
        cursor: pointer;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px;
        transition: $common-transition;
        border-radius: 4px;

        &:hover {
          background: #fff;

          svg {
            fill: black;
          }
        }

        svg {
          width: 100%;
          height: 100%;
          fill: #2c2c2c;
        }
      }
    }

    >small {
      position: absolute;
      left: 50%;
      font-family: $font-code;
      transform: translateX(-50%);
      top: 6px;
      font-size: f-size(0.65);
      color: #9c9c9c;
      line-height: 20px;
    }

    >div {
      position: relative;
      top: 12px;
      margin-bottom: 24px;
      transform: translateX(calc(100% + 21px));
      background: #ffbe2b;
      box-shadow: 0 0 0 1px #9f7826;

      &,
      &::before,
      &::after {
        width: 9px;
        height: 9px;
        border-radius: 50%;
      }

      &::before,
      &::after {
        position: absolute;
        content: "";
      }

      &::before {
        background: #ff6056;
        box-shadow: 0 0 0 1px #ad3d3c;
        top: 0;
        right: 0;
        transform: translateX(calc(-100% - 7px));
      }

      &::after {
        background: #23ca3d;
        box-shadow: 0 0 0 1px #218630;
        top: 0;
        right: 0;
        transform: translateX(calc(100% + 7px));
      }
    }

    >code.hljs {
      display: block;
      word-break: keep-all;
      padding: 0.5rem 0.8rem;
      border-top: 1px solid #e4e4e4;
      border-radius: 0 0 8px 8px;
      max-height: 90vh;
      background: white;
      font-size: f-size(0.8);
      font-weight: 400;
      line-height: 1.2rem;
      position: relative;
      overflow: auto;

      @include mobile {
        padding: 0.5rem 0.8rem;
        font-size: f-size(0.78);
        line-height: 1.3rem;
      }
    }

    &.theme-dark {
      background: #282c34;
    }
  }

  fieldset {
    width: 98%;
    margin: 22px 1%;
    padding: 1.2rem 1rem 0.6rem;
    position: relative;
    transition: $common-transition;
    border-radius: 0.2rem;
    border: 1px solid #cfcfcf;

    &:hover {
      border-color: #a3a3a3;
    }

    * {
      position: relative;
    }

    >legend {
      position: absolute;
      font-size: f-size(0.8);
      height: 1.4rem;
      line-height: 1.4rem;
      top: -0.9rem;
      left: 1rem;
      display: flex;
      align-items: center;
      background: #826aff;
      border-radius: 0.2rem;
      color: white;
      padding: 0.2rem 0.8rem;
    }
  }

  .encrypt-block {
    border: 1px solid rgb(199 199 199);
    border-radius: 8px;
    padding: 8px;
    margin: 10px 0;
  }

  .container-block {
    margin: 16px 0;
    position: relative;
    border-radius: 8px;
    padding: 16px 16px 8px;
    border-width: 1px;
    border-style: solid;
    background: rgb(249 249 250);

    @include dark-mode {
      background: rgb(47 47 47);
    }

    &.info,
    &.details {
      border-color: rgb(60 60 67 / 29%);
      color: #3c3c43bf;

      @include dark-mode {
        border-color: rgb(168 168 186 / 29%);
        color: #d3d3e8bf;
      }
    }

    > .container-title {
      font-weight: bold;
    }

    &.details {
      summary {
        cursor: pointer;
      }
    }

    &.tip {
      border-color: rgb(16 185 129);
      color: rgb(5 150 105);
    }

    &.warning {
      border-color: rgb(217 119 6);
      color: rgb(217 119 6);
    }

    &.danger {
      border-color: rgb(244 63 94);
      color: rgb(244 63 94);
    }
  }

  div.embed-media {
    max-width: 50rem;
    height: 30rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1.2rem auto;

    @include mobile {
      padding: 0.5rem 0.8rem;
      font-size: f-size(0.78);
      line-height: 1.3rem;
    }

    >iframe {
      width: 100%;
      flex-grow: 1;
      box-shadow: $common-box-shadow;
    }

    &.vanilla-video {
      video {
        width: 100%;
        height: 0;
        object-fit: contain;
        flex-grow: 1;
        box-shadow: $common-box-shadow;
      }
    }

    &.vanilla-audio {
      height: unset;

      audio {
        width: 100%;
      }
    }
  }

  .math-formula {
    position: relative;

    &.block {
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
      overflow-x: auto;

      &::before,
      &::after {
        content: "";
        margin: auto;
      }

      >div {
        margin: 1rem 0;
      }
    }

    &.inline {
      margin: 0 0.5rem;
    }
  }
}
